<template>
    <div class="my-v-top">
        <p class="font-medium text-2xl">{{ title }}</p>
    </div>
    <div class="grid grid-cols-5 gap-4 mt-4">
        <div class="shadow-2xl cursor-pointer border">
            <div
                :style="{background: 'url(https://p1.music.126.net/hJCGK_Nm0aCSNG-2OKBo4Q==/75866302329286.jpg?param=200y200)'}"
                style="height: 128px">
                <div class="flex">
                    <p class="text-white my-auto ml-auto">播放数量</p>
                </div>
                <div class="h-3/4 flex items-end">
                    <p class="text-white">播放时长</p>
                </div>
            </div>
            <div>
                <p>歌名</p>
                <p>歌手名字</p>
            </div>
        </div>
        <div class="shadow-2xl cursor-pointer border">
            <div
                :style="{background: 'url(https://p1.music.126.net/hJCGK_Nm0aCSNG-2OKBo4Q==/75866302329286.jpg?param=200y200)'}"
                style="height: 128px">
                <div class="flex">
                    <p class="text-white my-auto ml-auto">播放数量</p>
                </div>
                <div class="h-3/4 flex items-end">
                    <p class="text-white">播放时长</p>
                </div>
            </div>
            <div>
                <p>歌名</p>
                <p>歌手名字</p>
            </div>
        </div>
        <div class="shadow-2xl cursor-pointer border">
            <div
                :style="{background: 'url(https://p1.music.126.net/hJCGK_Nm0aCSNG-2OKBo4Q==/75866302329286.jpg?param=200y200)'}"
                style="height: 128px">
                <div class="flex">
                    <p class="text-white my-auto ml-auto">播放数量</p>
                </div>
                <div class="h-3/4 flex items-end">
                    <p class="text-white">播放时长</p>
                </div>
            </div>
            <div>
                <p>歌名</p>
                <p>歌手名字</p>
            </div>
        </div>
        <div class="shadow-2xl cursor-pointer border">
            <div
                :style="{background: 'url(https://p1.music.126.net/hJCGK_Nm0aCSNG-2OKBo4Q==/75866302329286.jpg?param=200y200)'}"
                style="height: 128px">
                <div class="flex">
                    <p class="text-white my-auto ml-auto">播放数量</p>
                </div>
                <div class="h-3/4 flex items-end">
                    <p class="text-white">播放时长</p>
                </div>
            </div>
            <div>
                <p>歌名</p>
                <p>歌手名字</p>
            </div>
        </div>
        <div class="shadow-2xl cursor-pointer border">
            <div
                :style="{background: 'url(https://p1.music.126.net/hJCGK_Nm0aCSNG-2OKBo4Q==/75866302329286.jpg?param=200y200)'}"
                style="height: 128px">
                <div class="flex">
                    <p class="text-white my-auto ml-auto">播放数量</p>
                </div>
                <div class="h-3/4 flex items-end">
                    <p class="text-white">播放时长</p>
                </div>
            </div>
            <div>
                <p>歌名</p>
                <p>歌手名字</p>
            </div>
        </div>
        <div class="shadow-2xl cursor-pointer border">
            <div
                :style="{background: 'url(https://p1.music.126.net/hJCGK_Nm0aCSNG-2OKBo4Q==/75866302329286.jpg?param=200y200)'}"
                style="height: 128px">
                <div class="flex">
                    <p class="text-white my-auto ml-auto">播放数量</p>
                </div>
                <div class="h-3/4 flex items-end">
                    <p class="text-white">播放时长</p>
                </div>
            </div>
            <div>
                <p>歌名</p>
                <p>歌手名字</p>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage} from 'naive-ui';

export default {
    name: "MyVideo",
    props: {
        title: {
            type: String,
            default: ''
        }
    },
    setup() {
    },
    components: {
        NImage
    }
}
</script>

<style scoped lang="scss">
.my-v-top {
    border-bottom: 2px solid #c20c0c;
}
</style>